<template>
  <div class="car_m">
    <loading v-bind:state="state"></loading>
    <div class="header"></div>
    <div class="car_sec">
      <p class="p1">{{card.rank.name}}</p>
      <p class="p2" style="line-height: 1.6" v-if="mainState">
        {{card.rank.info.province}}{{card.rank.info.city}}{{card.rank.info.area}}
      </p>
      <p class="p2 shaw_" v-if="mainState">{{card.rank.info.end_time}}到期</p>
      <p class="p3 user_des" v-if="topState">{{card.tips}}</p>
    </div>
    <div class="space"></div>
    <div class="space"></div>
    <ul class="list_o">
      <li :class="{item,newItem:item.styleState}" v-for="(item , index ) in card.list" :key="index">
        <img :src="item.info.pic">
        <div :class="[item_Sec,{newItemSec:item.styleState}]">
          <p>{{item.name}}卡包</p>
          <p v-show="item.infoState">{{item.info.name}} | ID:{{item.info.uid}}</p>
        </div>
        <div class="new_item" v-show="item.styleState">
          <div class="new_in">
            <p class="p4">账户余额</p>
            <p class="p4">{{item.info.balance}}</p>
          </div>
          <div class="new_in">
            <p class="p4">账户积分</p>
            <p class="p4">{{item.info.integral}}</p>
          </div>
          <div class="new_in" @click="toOther(item.url)">
            <p class="p4">详情</p>
            <img :src="getIcon('arrow_right_white')" style="width: 4vw">
          </div>
        </div>
        <img :src="getIcon('arrow_low')" alt="" class="btn_one" @click="checkItem(index)">
      </li>
    </ul>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    name: `card`,
    data() {
      return {
        state: true,
        user: {},
        card: {
          rank: {
            name: ''
          }
        },
        endDate: '',
        itemStyle: 'item', // 样式
        item_Sec: 'item_sec',
        topState: false, // 会员身份显示与否
        mainState: false // 会员身份显示与否
      };
    },
    created() {
      this.getRankListCall();
    },
    methods: {
      getIcon(icon) {
        // 获取svg
        return this.$Public.iconImg + icon + '.svg';
      },
      getRankListCall() {
        // 获取卡包
        this.$Spread.getRankList().then(res => {
          // console.log(res, '你是谁');
          this.state = false;
          for (let i in res.list) {
            res.list[i].styleState = false;
            if (res.list[i].info.length < 1) {
              res.list[i].infoState = false;
            } else {
              res.list[i].infoState = true;
            }
          }
          this.card = res;
          if (this.card.rank.info) {
            this.mainState = true;
          } else {
            this.mainState = false;
          }
          if (this.card.rank.level === 'normal') {
            this.topState = false;
          } else {
            this.topState = true;
          }
        }, () => {
          this.state = false;
        });
      },
      checkItem(index) {
        // 切换每个卡包的状态
        this.card.list[index].styleState = !this.card.list[index].styleState;
      },
      toOther(url) {
        // 去别的系统
        window.location.href = url;
      }
    }
  };
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "../../assets/stylus/main.styl";
  .p4 {
    word(14px, #fff)
  }

  .user_des {
    text-align: center;
    line-height: 1.2
  }

  .car_m {
    width 100vw
    background #fff;
  }

  .new_item {
    flex-y();
    .new_in {
      flex-x();
      justify-content space-between
      width vw(258px);
      height: 8vw
    }
  }

  .space {
    space()
  }

  .btn_one {
    width 3vw;
    padding 3vw
    right 6vw
    position absolute
    top: 6vw
  }

  .list_o {
    width 100vw
    margin-top 30vw
  }

  .item {
    width 100%
    background gradient-color
    height vw(120px)
    border-radius 3vw
    flex-x()
    padding vw(25px)
    box-sizing border-box
    margin-top -4vw
    position: relative
    transition (all 0.3s linear);
    justify-content flex-start
    & img:first-child {
      width vw(49px)
      height vw(49px)
      border-radius 50%
      background transparent
    }
    & .item_sec {
      /*flex: 1*/
      flex-y();
      align-items flex-start
      padding-left 3vw
      & p {
        line-height 2
        word(14px, #f9f9f9)
      }
    }
    & .newItemSec {
      padding 0;
      flex-y();
      align-items center
    }

  }

  .shaw_ {
    border-radius 3vw
    border(1px, #E6395A)
    padding 1vw 4vw;
    margin 3vw
  }

  .p1 {
    word(30px, #E6395A)
  }

  .p2 {
    word(14px, #E6395A)
  }

  .p3 {
    word(12px, #666)
  }

  .car_sec {
    width 94vw;
    background #ffffff
    border-radius 3vw
    overflow hidden;
    height vw(160px)
    margin: 0 auto
    top: 10vw
    position: absolute;
    left 3vw
    flex-y();
    align-items center
    box-shadow: 0 2px 10px #ccc;
    padding 0 vw(49px);
    box-sizing border-box
  }

  .header {
    width: 100vw;
    height: vw(100px);
    color: white
    padding 10vw 3vw
    box-sizing border-box
    background gradient-color
  }

  .newItem {
    height 69vw;
    flex-y();
    transition (all 0.3s linear);
  }

</style>
